<script setup lang="ts">

import SellerEcharts from '@/components/echarts/SellerEcharts.vue'
import TrendEcharts from '@/components/echarts/TrendEcharts.vue'
import RankEcharts from '@/components/echarts/RankEcharts.vue'
import HotEcharts from '@/components/echarts/HotEcharts.vue'
import MapEcharts from '@/components/echarts/MapEcharts.vue'
import { onMounted, ref } from 'vue'
import type { Hot, Rank, Seller, Trend, Map } from '@/types/eCommerce'
import { getHotAPI, getMapAPI, getRankAPI, getSellerAPI, getTrendAPI } from '@/service/eCommerce'

// hot组件数据处理
const hotAllData = ref<Hot[]>([])
const hotHttp = async () => {
  const res = await getHotAPI()
  hotAllData.value = res.data
}

//rank组件数据处理
const rankAllData = ref<Rank[]>([])
const rankHttp = async () => {
  const res = await getRankAPI()
  rankAllData.value = res.data
}

// sell组件数据处理
const sellerAllData = ref<Seller[]>([])
const sellerHttp = async () => {
  const res = await getSellerAPI()
  sellerAllData.value = res.data.sort((a, b) => a.value - b.value)
}

//获取trend组件数据
const trendAllData = ref<Trend[]>([])
const trendHttp = async () => {
  const res = await getTrendAPI()
  trendAllData.value = res.data
}


const mapAllData = ref<Map[]>([])
const mapHttp = async () => {
  const res = await getMapAPI()
  let resLength = res.data.length
  for (let i = 0; i < resLength; i++) {
    const item = res.data[i].name
    if (item === '海外') {
      res.data.splice(i, 1)
      resLength--
      continue
    }
    for (let j = i + 1; j < res.data.length; j++) {
      if (item === res.data[j].name) {
        res.data[i].value = res.data[i].value + res.data[j].value
        res.data.splice(j, 1)
        resLength--
      }
    }
  }
  mapAllData.value = res.data
}
onMounted(async () => {
    await Promise.allSettled([hotHttp(), rankHttp(), sellerHttp(), trendHttp(), mapHttp()])
    // await hotHttp()
    // await rankHttp()
    // await sellerHttp()
    // await trendHttp()
    // await mapHttp()
  }
)

</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="40%" class="echarts">
          <div class="hot">
            <hot-echarts :hot-data="hotAllData" />
          </div>
          <div class="rank">
            <seller-echarts :seller-data="sellerAllData" />
          </div>
        </el-aside>
        <el-main class="echarts">
          <map-echarts :map-data="mapAllData" />
        </el-main>
      </el-container>
      <el-header height="35%">
        <el-container>
          <el-aside width="50%" class="echarts">
            <rank-echarts :rank-data="rankAllData" />
          </el-aside>
          <el-aside width="50%" class="echarts">
            <trend-echarts :trend-data="trendAllData" />
          </el-aside>
        </el-container>
      </el-header>
    </el-container>
  </div>
</template>

<style scoped>
.echarts {
  overflow: hidden;
}

.common-layout, .el-container {
  background-color: #181818;
  width: 100%;
  height: 100%;

}

.hot, .rank {
  width: 100%;
  height: 50%;
}

.el-header {
  padding: 0;
}

</style>